<!doctype html>
<html>

    <head>
        <meta charset="utf-8">
        <link id="css" href="style1.css" rel="stylesheet" />
        <title>車牌辨識</title>
        <div id="container">
            <canvas id='c'></canvas>
            <canvas id='new' style="display: none"></canvas>
        </div>
        <div id="top"></div>
        <div id="Progres"> </div>
        <div id="header">
            <table id="title" width="100%" border="0">
                <tbody>
                    <tr>
                        <td>&nbsp;</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div id="content1">
            <table id="img01" width="360px">
                <tbody>
                    <tr>
                        <td height="29" style="font-size: medium">車牌影像</td>
                    </tr>
                    <tr>
                        <td height="290">&nbsp;</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div id="content2" style='display:none'>
            <table id="img02" width="338px">
                <tr>
                    <td height="29" style="font-size: medium">校正影像</td>
                </tr>
                <tr>
                    <td height="130">&nbsp;</td>
                </tr>
            </table>
        </div>
        <div id="content2-1" style='display:none'>
            <div id="special">
                <table id="sp" width="338px" border="0">
                    <tr>
                        <td width="115" valign="middle">
                            <input type="checkbox" id="specialRuleCheckBox">
                            <label for="checkbox"><strong>特殊條件</strong></label>
                        </td>
                        <td id="specialRuleSelect" style="height:20px;" <td>
                    </tr>
                </table>
            </div>
            <div id="special2">
                <table id="table2-1" width="185" border="0">
                    <tr>
                        <td colspan="2" style="font-size: 16px">車牌類型</td>
                    </tr>
                    <tr>
                        <td colspan="2" align="center">
                            <select size="1" id="lengthListBox" style="width:150" onchange="lengthListBoxOnChange(this.options[this.options.selectedIndex].value)">
                                <option value="0">請選擇</option>
                                <option value="1">車牌號碼 6碼=>2-4</option>
                                <option value="2">車牌號碼 6碼=>4-2</option>
                                <option value="3">車牌號碼 6碼=>3-3</option>
                                <option value="4">車牌號碼 7碼=>3-4</option>
                                <option value="5">車牌號碼 5碼=>2-3</option>
                                <option value="6">車牌號碼 5碼=>3-2</option>
                                <option value="7">車牌號碼 4碼=>2-2</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td style="font-size: 12px">
                            <input type="checkbox" id="whiteWordCheckBox">
                            <label for="checkbox">是否為白色字體 </label>
                        </td>
                        <td rowspan="2" style="font-size: 12px"><span style="font-size: 12px; color: #E00305;"><img id="image2" src="images1/white.png" width="62" height="44" alt=""/></span></td>
                    </tr>
                    <tr>
                        <td height="30" style="font-size: 12px; color: #E00305;" align="right">(白色字體圖樣)</td>
                    </tr>
                </table>
                <table id="table2-1" width="153" border="0">
                    <tr>
                        <td style="font-size: 16px">車輛類型</td>
                    </tr>
                    <tr>
                        <td style="font-size: 9px">&nbsp;</td>
                    </tr>
                    <tr>
                        <td style="font-size: 14px">&nbsp;&nbsp;牌類&nbsp;&nbsp;&nbsp;&nbsp;
                            <select size="1" id="classListBox" style="width:150">
                                <option value="0">請選擇</option>
                                <option value="A">汽車</option>
                                <option value="H">重機</option>
                                <option value="L">輕機</option>
                                <option value="D">臨時汽車</option>
                                <option value="E">臨時重機</option>
                                <option value="F">臨時輕機</option>
                                <option value="T">拖車</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td style="font-size: 9px">&nbsp;</td>
                    </tr>
                    <tr>
                        <td style="font-size: 14px">&nbsp;&nbsp;顏色&nbsp;&nbsp;&nbsp;&nbsp;
                            <select size="1" id="colorListBox" style="width:150">
                                <!--<option disabled>車色</option>-->
                                <option value="0">請選擇</option>
                                <option value="A">紅</option>
                                <option value="B">粉紅</option>
                                <option value="C">深紅</option>
                                <option value="D">橙黃</option>
                                <option value="E">黃</option>
                                <option value="F">淺黃</option>
                                <option value="G">深黃</option>
                                <option value="H">綠</option>
                                <option value="I">淺綠</option>
                                <option value="J">深綠</option>
                                <option value="K">藍</option>
                                <option value="L">淺藍</option>
                                <option value="M">深藍</option>
                                <option value="N">紫</option>
                                <option value="O">淺紫</option>
                                <option value="P">深紫</option>
                                <option value="Q">白</option>
                                <option value="R">灰</option>
                                <option value="S">淺灰</option>
                                <option value="T">深灰</option>
                                <option value="U">棕</option>
                                <option value="V">淺棕</option>
                                <option value="W">深棕</option>
                                <option value="X">黑</option>
                                <option value="Y">銀</option>
                                <option value="Z">彩繪</option>
                                <option value="9">金</option>
                            </select>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
        <div id="content3-1"></div>
        <div id="content3" style='display:none'>
            <table id="img04" width="360px">
                <tbody>
                    <tr>
                        <td height="29" style="font-size: medium">分割影像</td>
                    </tr>
                    <tr>
                        <td height="88">&nbsp;</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div id="content4" style='display:'>
            <div id="explain">
                <h1><br>               
        	   <hr>               
      	     </h1>
                <h2 id="txt">從車牌影像中，選取辨識目標，<br>執行車牌校正功能。<br><br>目標擷取完整有利於車牌辨識的結果。<br><br>1.還原原始預設，請按重新選取<br>2.目標擷取後請按確認鍵</h2> </div>
        </div>
        <div id="content5" style='display:none'>
            <table id="img05" width="590px ">
                <tbody>
                    <tr>
                        <td height="29" colspan="17" style="font-size: medium">挑選車號 </td>
                    </tr>
                    <tr>
                        <td height="130">
                            <select size="5" id="sourceListBox" style="width:150;display: none">
                                <option value="0">0</option>
                                <option value="1">1</option>
                                <option value="2">2</option>
                                <option value="3">3</option>
                                <option value="4">4</option>
                                <option value="5">5</option>
                                <option value="6">6</option>
                                <option value="7">7</option>
                                <option value="8">8</option>
                                <option value="9">9</option>
                                <option value="A">A</option>
                                <option value="B">B</option>
                                <option value="C">C</option>
                                <option value="D">D</option>
                                <option value="E">E</option>
                                <option value="F">F</option>
                                <option value="G">G</option>
                                <option value="H">H</option>
                                <option value="I">I</option>
                                <option value="J">J</option>
                                <option value="K">K</option>
                                <option value="L">L</option>
                                <option value="M">M</option>
                                <option value="N">N</option>
                                <option value="O">O</option>
                                <option value="P">P</option>
                                <option value="Q">Q</option>
                                <option value="R">R</option>
                                <option value="S">S</option>
                                <option value="T">T</option>
                                <option value="U">U</option>
                                <option value="V">V</option>
                                <option value="W">W</option>
                                <option value="X">X</option>
                                <option value="Y">Y</option>
                                <option value="Z">Z</option>
                            </select>
                        </td>
                        <td>
                            <select id="1Char" multiple>
                                <option value="empty">
                            </select>
                        </td>
                        <td>
                            <input class="button" type="button" id="1CharDelButton" value="-" onclick="deleteListBoxValue('1Char');" />
                            <br>
                            <input class="button" type="button" id="1CharAddButton" value="+" onclick="addListBoxValue('1Char');" /> </td>
                        <td>
                            <select id="2Char" multiple>
                                <option value="empty">
                            </select>
                        </td>
                        <td>
                            <input class="button" type="button" id="2CharDelButton" value="-" onclick="deleteListBoxValue('2Char');" />
                            <input class="button" type="button" id="2CharAddButton" value="+" onclick="addListBoxValue('2Char');" /> </td>
                        <td>
                            <select id="3Char" multiple>
                                <option value="empty">
                            </select>
                        </td>
                        <td>
                            <input class="button" type="button" id="3CharDelButton" value="-" onclick="deleteListBoxValue('3Char');" />
                            <input class="button" type="button" id="3CharAddButton" value="+" onclick="addListBoxValue('3Char');" /> </td>
                        <td>
                            <select id="4Char" multiple>
                                <option value="empty">
                            </select>
                        </td>
                        <td>
                            <input class="button" type="button" id="4CharDelButton" value="-" onclick="deleteListBoxValue('4Char');" />
                            <input class="button" type="button" id="4CharAddButton" value="+" onclick="addListBoxValue('4Char');" /> </td>
                        <td>
                            <select id="5Char" multiple>
                                <option value="empty">
                            </select>
                        </td>
                        <td>
                            <input class="button" type="button" id="5CharDelButton" value="-" onclick="deleteListBoxValue('5Char');" />
                            <input class="button" type="button" id="5CharAddButton" value="+" onclick="addListBoxValue('5Char');" /> </td>
                        <td>
                            <select id="6Char" multiple>
                                <option value="empty">
                            </select>
                        </td>
                        <td>
                            <input class="button" type="button" id="6CharDelButton" value="-" onclick="deleteListBoxValue('6Char');" />
                            <input class="button" type="button" id="6CharAddButton" value="+" onclick="addListBoxValue('6Char');" /> </td>
                        <td>
                            <select id="7Char" multiple>
                                <option value="empty">
                            </select>
                        </td>
                        <td>
                            <input class="button" type="button" id="7CharDelButton" value="-" onclick="deleteListBoxValue('7Char');" />
                            <input class="button" type="button" id="7CharAddButton" value="+" onclick="addListBoxValue('7Char');" /> </td>
                    </tr>
                </tbody>
            </table>
            <h1><strong>預測分析數量</strong>：共&nbsp;N&nbsp;筆結果</h1> </div>
        <div id="content6" style='display: none;'> </div>
        <div id="content7"></div>
        <div id="footer1">
            <button id="btn-black" type="button" onClick='backpage()'><strong>重新設定</strong></button>
        </div>
        <div id="footer2">
            <button id="btn-next" type="button" onClick='next()'><strong>下一步</strong></button>
        </div>
    </head>
    <!-- -->

    <body>
        <script type="text/javascript" src="jquery-1.7.1.min.js"></script>
        <script type="text/javascript" src="ddslick.js"></script>
        <script language="javascript">
        ////for develop mode
        //var IMG_URL = getParameter('image');
        var IMG_URL = 'moto.jpg';
        SPACE = 10,
            SRC_WIDTH = 300,
            SRC_HEIGHT = 239,
            DST_WIDTH = 300, //465 - SRC_WIDTH - SPACE * 3,
            DST_HEIGHT = 100; // - SRC_HEIGHT - SPACE * 3;
        FinalDST_WIDTH = 300, //465 - SRC_WIDTH - SPACE * 3,
            FinalDST_HEIGHT = 100; // - SRC_HEIGHT - SPACE * 3;
        var img,
            canvas,
            //new canvas add
            canvas_store,
            context_store,
            //
            context,
            points,
            srcImageData,
            draggingPoint = null,
            draggingDstPoint = null,
            draggingFinalDstPoint = null,
            selectedDraggingDstPoint,
            scaleLeftTopPoint = null,
            scaleRightBottomPoint = null,
            wheelEvent = "false",
            wheelCnt = 0;
        var ltPoint; //left-top point
        var rbPoint; //right-bottom point
        var isScale; //boolean whether scale larger 
        var scaleValue; //percent value of scale
        //var ctx,dst,ctx_store,finalDst;
        var xAxisOfFinalDstLine;
        var yAxisOfFinalDstLine;
        var numLineOfFinalDst;
        var beforeDashCharCnt = 0;
        var finalDstImg; //Implement Binarization  by Mandy
        var finalDstImgWidth;
        var finalDstImgheight;
        var specialData = [
        {
            text: "普通重型機車",
            value: 1,
            selected: false,
            description: "7碼(前英3, 後數4)",
            imageSrc: "./images1/automobile/0.jpg"
        },
        {
            text: "大型重型機車",
            value: 2,
            selected: false,
            description: "黃底黑字,7碼(前英3, 後數4)",
            imageSrc: "./images1/automobile/1.jpg"
        },
        {
            text: "輕型機車",
            value: 3,
            selected: false,
            description: "綠底白字,7碼(前英3, 後數4)",
            imageSrc: "./images1/automobile/2.jpg"
        },
        {
            text: "小型輕型機車",
            value: 4,
            selected: false,
            description: "白底紅字,7碼(前英3, 後數4)",
            imageSrc: "./images1/automobile/3.jpg"
        },
        {
            text: "自用小客車",
            value: 5,
            selected: false,
            description: "7碼(前英3, 後數4)",
            imageSrc: "./images1/automobile/4.jpg"
        },
        {
            text: "營業小客車",
            value: 6,
            selected: false,
            description: "白底紅字,6碼(前英3，後數3)",
            imageSrc: "./images1/automobile/5.jpg"
        },
        {
            text: "遊覽大客車",
            value: 7,
            selected: false,
            description: "紅底白字,6碼(前英3, 後數3)",
            imageSrc: "./images1/automobile/6.jpg"
        }];
        window.addEventListener('DOMContentLoaded', function ()
        {
            canvas = document.getElementById('c');
            context = canvas.getContext('2d');
            //***** add ****//	
            canvas_store = document.getElementById('new');
            context_store = canvas_store.getContext('2d');
            //------- reset ------//  
            document.getElementById("specialRuleCheckBox").checked = false;
            document.getElementById("whiteWordCheckBox").checked = false;
            document.getElementById("lengthListBox").selectedIndex = "0";
            document.getElementById("classListBox").selectedIndex = "0";
            document.getElementById("colorListBox").selectedIndex = "0";
			document.getElementById("lengthListBox").disabled = false;
			document.getElementById("whiteWordCheckBox").disabled = false;
            //**************//
            /****************Mandy add*******************************/
            srcBounds = new Rect(SPACE + 50, SPACE / 2 | 0 + 200, SRC_WIDTH, SRC_HEIGHT);
            dstBounds = new Rect(srcBounds.right() + 65 + SPACE, srcBounds.y, DST_WIDTH, DST_HEIGHT);
            finalDstBounds = new Rect(SPACE + 50, dstBounds.y + DST_HEIGHT + 3 * SPACE + 200, FinalDST_WIDTH, FinalDST_HEIGHT);
            /****************Mandy end*******************************/
            //**************//
            /*srcBounds = new Rect(SPACE, SPACE / 2 | 0, SRC_WIDTH, SRC_HEIGHT);
	dstBounds = new Rect(srcBounds.right() + SPACE, srcBounds.y, DST_WIDTH, DST_HEIGHT);
	finalDstBounds = new Rect(srcBounds.right() + SPACE, dstBounds.y + DST_HEIGHT + 3*SPACE, FinalDST_WIDTH, FinalDST_HEIGHT);
	*/
            ltPoint = new Point(0, 0);
            rbPoint = new Point(srcBounds.width, srcBounds.height);
            isScale = false;
            scaleValue = 0.02;
            var bounds = new Rect(0, 0, SRC_WIDTH, SRC_HEIGHT).inflate(-60, -60);
            var dstBountsPoint = new Rect(0, 0, DST_WIDTH, DST_HEIGHT).inflate(-60, -60);
            points = [
                bounds.topLeft(),
                bounds.topRight(),
                bounds.bottomRight(),
                bounds.bottomLeft()
            ];
            dstPoints = [
                dstBountsPoint.topLeft(),
                dstBountsPoint.topRight(),
                dstBountsPoint.bottomRight(),
                dstBountsPoint.bottomLeft()
            ];
            img = new Image();
            img.addEventListener('load', onImageLoad, false);
            img.src = IMG_URL;
            //hcf
            numLineOfFinalDst = 5; //5 line for 6 areas
            xAxisOfLine = [0, 0, 0, 0, 0, 0, 0, 0]; //leftest and rightest are bounds
            var xLen = Math.abs(dstPoints[1].x - dstPoints[0].x);
            var yLen = Math.abs(dstPoints[2].y - dstPoints[1].y);
            var temp = xLen / (numLineOfFinalDst + 1);
            for (i = 1; i <= numLineOfFinalDst + 1; i++)
            {
                xAxisOfLine[i] = temp * i;
            }
            //--  	
            canvas.addEventListener('mousemove', onCanvasMouseMove, false);
            canvas.addEventListener('mousedown', onCanvasMouseDown, false);
            canvas.addEventListener('mouseup', onCanvasMouseUp, false);
            canvas.addEventListener('mouseout', onCanvasMouseUp, false);
            //canvas.addEventListener('DOMMouseScroll', MouseWheelHandler, false);
            if (canvas.addEventListener)
            {
                // IE9, Chrome, Safari, Opera
                canvas.addEventListener("mousewheel", MouseWheelHandler, false);
                // Firefox
                canvas.addEventListener("DOMMouseScroll", MouseWheelHandler, false);
            }
            // IE 6/7/8
            else canvas.attachEvent("onmousewheel", MouseWheelHandler);
        }, false);

        function onImageLoad(e)
        {
            //canvas.width = 700;
            //canvas.height = 250;
            /************Mandy edit***********/
            canvas.width = 800;
            canvas.height = 700;
            /*********************************/
            context.drawImage(img, srcBounds.x, srcBounds.y, srcBounds.width, srcBounds.height);
            context.fillStyle = context.strokeStyle = 'yellow'; //'cyan';
            context.lineWidth = 1;
            context.font = '10px sans-serif';
            context.textBaseline = 'top';
            //alert("srcBounds.x:"+srcBounds.x+",srcBounds.y:"+srcBounds.y+",srcBounds.width:"+srcBounds.width+",srcBounds.height:"+srcBounds.height);
            srcImageData = context.getImageData(srcBounds.x, srcBounds.y, srcBounds.width, srcBounds.height);
            hideAllCharListBox();
            //預設選擇車牌長度6碼=>2-4
            //lengthListBoxOnChange("1");
            //setCharListBox("1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21");
            update();
        }

        function MouseWheelHandler(e)
        {
            var e = window.event || e; // old IE support
            var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
            //alert(delta);
            if (delta > 0)
            {
                //scaleX /= 1.05;
                //scaleY /= 1.05;										
                wheelEvent = "add";
                wheelCnt++;
                update();
            }
            else
            {
                //scaleLeftTopPoint = new Point(0.05*srcBounds.width, 0.05*srcBounds.height);
                //scaleRightBottomPoint = new Point(0.95*srcBounds.width, 0.95*srcBounds.height);
                //var x = scaleBasePoint.x-(scaleX*1.1)*0.05*srcBounds.width;
                //var y = scaleBasePoint.y-(scaleY*1.1)*0.05*srcBounds.height;
                //if(scaleBasePoint.x<=0 || scaleBasePoint.y<=0){
                if (isScale == false)
                {}
                else
                {
                    //scaleX *= 1.05;
                    //scaleY *= 1.05;					
                    wheelEvent = "reduce";
                    wheelCnt--;
                    update();
                }
            }
            //if(scaleX < 1) scaleX = 1;
            //if(scaleY < 1) scaleY = 1;
            //prevent to scroll the browser window
            e.returnValue = false;
            if (e.preventDefault) e.preventDefault();
            return false;
        }

        function onCanvasMouseMove(e)
        {
            if (draggingPoint)
            {
                var p = draggingPoint;
                p.x = handleEvent(e, "X") - srcBounds.x;
                p.y = handleEvent(e, "Y") - srcBounds.y;
                if (p.x < 0) p.x = 0;
                else if (p.x > srcBounds.width) p.x = srcBounds.width;
                if (p.y < 0) p.y = 0;
                else if (p.y > srcBounds.height) p.y = srcBounds.height;
                update();
            }
            if (draggingDstPoint)
            {
                var p = draggingDstPoint;
                p.x = handleEvent(e, "X") - dstBounds.x;
                p.y = handleEvent(e, "Y") - dstBounds.y;
                if (p.x < 0) p.x = 0;
                else if (p.x > dstBounds.width) p.x = dstBounds.width;
                if (p.y < 0) p.y = 0;
                else if (p.y > dstBounds.height) p.y = dstBounds.height;
                var x, y, p1;
                if (selectedDraggingDstPoint == 0)
                {
                    x = draggingDstPoint.x;
                    y = draggingDstPoint.y;
                    p1 = dstPoints[2];
                }
                else if (selectedDraggingDstPoint == 1)
                {
                    x = dstPoints[3].x;
                    y = draggingDstPoint.y;
                    p1 = dstPoints[3];
                }
                else if (selectedDraggingDstPoint == 2)
                {
                    x = dstPoints[0].x;
                    y = dstPoints[0].y;
                    p1 = dstPoints[0];
                }
                else if (selectedDraggingDstPoint == 3)
                {
                    x = draggingDstPoint.x;
                    y = dstPoints[0].y;
                    p1 = dstPoints[1];
                }
                /*var p1;	
		if(selectedDraggingDstPoint!=2)
			p1 = dstPoints[(selectedDraggingDstPoint+2)%4];
		else
			p1 = dstPoints[2];
		
		var x = dstPoints[0].x;
		var y = dstPoints[0].y;*/
                var tmp = new Rect(x, y, Math.abs(p.x - p1.x), Math.abs(p.y - p1.y));
                //alert(tmp.topLeft().x+","+tmp.topLeft().y);
                dstPoints[0] = tmp.topLeft();
                dstPoints[1] = tmp.topRight();
                dstPoints[2] = tmp.bottomRight();
                dstPoints[3] = tmp.bottomLeft();
                //hcf
                ///*
                var originLen = xAxisOfLine[numLineOfFinalDst + 1];
                var xLen = Math.abs(dstPoints[1].x - dstPoints[0].x);
                if (xLen < 50)
                { //too small
                    var item = xLen / (numLineOfFinalDst + 1);
                    for (i = 1; i <= numLineOfFinalDst + 1; i++) xAxisOfLine[i] = item * i;
                }
                else
                {
                    for (i = 1; i <= numLineOfFinalDst; i++)
                    {
                        xAxisOfLine[i] = xAxisOfLine[i] * xLen / originLen;
                    }
                    xAxisOfLine[numLineOfFinalDst + 1] = xLen;
                }
                //*/		
                update();
            }
            //hcf
            ///*
            if (draggingFinalDstPoint >= 0)
            {
                xAxisOfLine[draggingFinalDstPoint] = handleEvent(e, "X") - finalDstBounds.x;
                if (xAxisOfLine[draggingFinalDstPoint] < xAxisOfLine[draggingFinalDstPoint - 1] + 5) //not a good way when value is fixed to 5
                    xAxisOfLine[draggingFinalDstPoint] = xAxisOfLine[draggingFinalDstPoint - 1] + 5;
                if (xAxisOfLine[draggingFinalDstPoint] > xAxisOfLine[draggingFinalDstPoint + 1] - 5) xAxisOfLine[draggingFinalDstPoint] = xAxisOfLine[draggingFinalDstPoint + 1] - 5;
                update();
            }
            //*/
            if (scaleLeftTopPoint != null && scaleRightBottomPoint == null && handleEvent(e, "X") >= srcBounds.x && handleEvent(e, "X") <= (srcBounds.x + srcBounds.width) && handleEvent(e, "Y") >= srcBounds.y && handleEvent(e, "Y") <= (srcBounds.y + srcBounds.height))
            {
                var movePoint = new Point(handleEvent(e, "X") - srcBounds.x, handleEvent(e, "Y") - srcBounds.y);
                update(movePoint);
            }
        }

        function onCanvasMouseUp(e)
        {
            if (draggingPoint == null && draggingDstPoint == null && scaleLeftTopPoint != null)
            {
                if (handleEvent(e, "X") >= srcBounds.x && handleEvent(e, "X") <= (srcBounds.x + srcBounds.width) && handleEvent(e, "Y") >= srcBounds.y && handleEvent(e, "Y") <= (srcBounds.y + srcBounds.height))
                {
                    scaleRightBottomPoint = new Point(handleEvent(e, "X") - srcBounds.x, handleEvent(e, "Y") - srcBounds.y);
                    if (Math.abs(scaleRightBottomPoint.x - scaleLeftTopPoint.x) > 10 && Math.abs(scaleRightBottomPoint.y - scaleLeftTopPoint.y) > 10) update();
                }
            }
            draggingPoint = null;
            draggingDstPoint = null;
            draggingFinalDstPoint = -1;
        }

        function onCanvasMouseDown(e)
        {
            //fred??
            /*if(e.clientX < srcBounds.x || e.clientX > (dstBounds.x+dstBounds.width) || e.clientY < dstBounds.y || e.clientY > (finalDstBounds.y+finalDstBounds.height)){
			alert("123");
			return;
	}*/
            var i, len, p, dx, dy;
            for (i = 0, len = points.length; i < len; i++)
            {
                p = points[i];
                dx = p.x - handleEvent(e, "X") + srcBounds.x;
                dy = p.y - handleEvent(e, "Y") + srcBounds.y;
                if (dx * dx + dy * dy < 100)
                {
                    draggingPoint = p;
                    p.x = handleEvent(e, "X") - srcBounds.x;
                    p.y = handleEvent(e, "Y") - srcBounds.y;
                    break;
                }
            }
            for (i = 0, len = dstPoints.length; i < len; i++)
            {
                p = dstPoints[i];
                dx = p.x - handleEvent(e, "X") + dstBounds.x;
                dy = p.y - handleEvent(e, "Y") + dstBounds.y;
                if (dx * dx + dy * dy < 100)
                {
                    draggingDstPoint = p;
                    selectedDraggingDstPoint = i;
                    p.x = handleEvent(e, "X") - dstBounds.x;
                    p.y = handleEvent(e, "Y") - dstBounds.y;
                    break;
                }
            }
            //hcf
            ///*
            var xLen, yLen;
            for (i = 1; i <= numLineOfFinalDst; i++)
            {
                xLen = Math.abs(dstPoints[1].x - dstPoints[0].x);
                yLen = Math.abs(dstPoints[2].y - dstPoints[1].y);
                if ((handleEvent(e, "X") - finalDstBounds.x > xLen) || (handleEvent(e, "Y") - finalDstBounds.y > yLen)) continue;
                dx = Math.abs(handleEvent(e, "X") - finalDstBounds.x - xAxisOfLine[i]);
                if (dx < 5)
                {
                    draggingFinalDstPoint = i;
                    break;
                }
            }
            //*/
            scaleLeftTopPoint = null;
            scaleRightBottomPoint = null;
            if (draggingPoint == null && draggingDstPoint == null)
            {
                if (handleEvent(e, "X") >= srcBounds.x && handleEvent(e, "X") <= (srcBounds.x + srcBounds.width) && handleEvent(e, "Y") >= srcBounds.y && handleEvent(e, "Y") <= (srcBounds.y + srcBounds.height)) scaleLeftTopPoint = new Point(handleEvent(e, "X") - srcBounds.x, handleEvent(e, "Y") - srcBounds.y);
            }
        }

        function getCharPosition()
            {
                var position = "";
                //var xLen = Math.abs(dstPoints[1].x-dstPoints[0].x);
                for (var i = 1; i < numLineOfFinalDst; i++)
                {
                    position += xAxisOfLine[i] + " ";
                    //ctx.moveTo(xAxisOfLine[i] + finalDstBounds.x, finalDstBounds.y);
                    //ctx.lineTo(xAxisOfLine[i] + finalDstBounds.x, finalDstBounds.y + Math.abs(dstPoints[2].y-dstPoints[1].y));
                }
                position += xAxisOfLine[numLineOfFinalDst];
                //alert(position);
                return position;
            }
            //return 編碼:　是否為新式車牌(7碼) 是否為白字　車牌碼數Dash前碼數
            //如0062: 非新式車牌　非白字　6碼　Dash前有2碼
        function getPlateFormat()
            {
                var totalCharCnt = numLineOfFinalDst + 1;
                var plateFormat = "";
                if (totalCharCnt == 7) plateFormat += "1";
                else plateFormat += "0";
                plateFormat += getCheckBoxChecked("whiteWordCheckBox");
                plateFormat += totalCharCnt;
                plateFormat += beforeDashCharCnt;
                return plateFormat;
            }
            //每個位置的選擇字元以,區別，位置之間以;區別 
            //如return  D,G,1;Q,8,0,P;
        function getSelectedChars()
            {
                var selectedChars = "";
                var id;
                for (var j = 1; j <= numLineOfFinalDst + 1; j++)
                {
                    id = j + "Char";
                    for (var i = 0; i < listBoxCnt[id] - 1; i++)
                    {
                        selectedChars += document.getElementById(id).options[i].value + ","
                    }
                    selectedChars += document.getElementById(id).options[listBoxCnt[id] - 1].value + ";"
                }
                alert("selectedChars:" + selectedChars);
                return selectedChars;
            }
            //selectedChars: A,C,E,W,7,5,2,.....
            //目前3個為一個車號字元的可能集合
        function setCharListBox(selectedChars)
            {
                var candidateCntEachChar = 3;
                //selectedCharsArray: 7,4,2,...,E,A,
                //selectedCharsArray.length: 7*candidateCntEachChar+1
                //selectedCharsArray最後一個元素為空字串
                var selectedCharsArray = selectedChars.split(",");
                //listBoxCnt["1Char"]
                for (var i = 1; i <= 7; i++) 
				{
					deleteAllListBoxValue(i + "Char");
				}
				//由於selectedCharsArray最後一個元素為空字串，所以只讀到i<selectedCharsArray.length-1
                for (var i = 0; i < selectedCharsArray.length - 1; i++)
                {
                    var AddOpt = new Option(selectedCharsArray[i], selectedCharsArray[i]);
                    var id = Math.floor(i / candidateCntEachChar + 1) + "Char";
                    //alert(id);
                    document.getElementById(id).options[listBoxCnt[id]++] = AddOpt;
                }
            }
            //for develop mode
        function predictLPNumber()
            {
                var candidateCntEachChar = 3;
                //selectedCharsArray: 7,4,2,...,E,A,
                //selectedCharsArray.length: 7*candidateCntEachChar+1
                //selectedCharsArray最後一個元素為空字串
                //var selectedCharsArray = selectedChars.split(",");
                var selectedCharsArray = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0", "Q", "A", "Z", "W", "S", "X", "E", "D"];
                //listBoxCnt["1Char"]
                for (var i = 1; i <= 7; i++) 
				{
					deleteAllListBoxValue(i + "Char");
                }
				//由於selectedCharsArray最後一個元素為空字串，所以只讀到i<selectedCharsArray.length-1
				
                for (var i = 0; i < selectedCharsArray.length - 1; i++)
                {
                    var AddOpt = new Option(selectedCharsArray[i], selectedCharsArray[i]);
                    var id = Math.floor(i / candidateCntEachChar + 1) + "Char";
                    document.getElementById(id).options[listBoxCnt[id]++] = AddOpt;
                }
            }
            //for develop mode
        function analysisLPNumber()
        {
            var str = "LFJ-5JX,LFJ-57X,LFJ-SJX,LFJ-S7X,LFJ-1JX,LFJ-17X,LTJ-5JX,LTJ-57X,LFJ-5TX,LFJ-5EX,LFJ-JJX,LPJ-5JX,LFJ-59X,LJJ-5JX,LFJ-52X,LFJ-J7X,LPJ-57X,LFJ-5GX,LFJ-YJX,LFJ-PJX,LFJ-8JX,LJJ-57X,L8J-5JX,LFJ-Y7X,LF1-5JX,LFJ-P7X,LFJ-87X,L9J-5JX,LTJ-SJX,L8J-57X,L7J-5JX,LF1-57X,LFS-5JX,SFJ-5JX,L9J-57X,LTJ-S7X,L7J-57X,LFJ-STX,JFJ-5JX,LFS-57X,LF7-5JX,LFT-5JX,LFJ-SEX,SFJ-57X,LTJ-1JX,LF8-5JX,LFF-5JX,LPJ-SJX,JFJ-57X,LF7-57X,LFT-57X,LFJ-S9X,LJJ-SJX,LTJ-17X,LF8-57X,LFJ-5JT,LFF-57X,LFJ-1TX,LFJ-S2X,LPJ-S7X,LFJ-SGX,ZFJ-5JX,LFJ-1EX,LJJ-S7X,LFJ-57T,L8J-SJX,LPJ-1JX,LFJ-5JS,ZFJ-57X,LF1-SJX,QFJ-5JX,LFJ-5JZ,LFJ-19X,LJJ-1JX,TFJ-5JX,UFJ-5JX,L9J-SJX,LFJ-12X,L8J-S7X,LPJ-17X,LTJ-5TX,LFJ-1GX,L7J-SJX,LFJ-57S,LF1-S7X,QFJ-57X,LFJ-57Z,LTJ-5EX,LFS-SJX,LJJ-17X,TFJ-57X,LFJ-5JH,SFJ-SJX,UFJ-57X,L8J-1JX,L9J-S7X,LTJ-JJX,LFJ-5JU,L7J-S7X,LFJ-5JC,LF1-1JX,JFJ-SJX,LFS-S7X,LTJ-59X,LF7-SJX,LFT-SJX,LFJ-57H,L9J-1JX,SFJ-S7X,L8J-17X,LF8-SJX,LTJ-52X,LTJ-J7X,L7J-1JX,LFF-SJX,LTJ-5GX,LTJ-YJX,LFJ-57U,LFJ-JTX,LPJ-5TX,LFJ-57C,LF1-17X,JFJ-S7X,LTJ-PJX,LFS-1JX,LTJ-8JX,LF7-S7X,LFJ-JEX,LFT-S7X,LPJ-5EX,SFJ-1JX,L9J-17X,LF8-S7X,LFJ-SJT,LJJ-5TX,L7J-17X,LFF-S7X,LTJ-Y7X,JFJ-1JX,LPJ-JJX,LT1-5JX,LTJ-P7X,LFJ-YTX,LJJ-5EX,ZFJ-SJX,LFS-17X,LTJ-87X,LF7-1JX,LFJ-PTX,LFT-1JX,LFJ-8TX,SFJ-17X,LFJ-J9X,LF8-1JX,LPJ-59X,LJJ-JJX,LFJ-YEX,LFJ-S7T,LFF-1JX,LFJ-PEX,LFJ-J2X,L8J-5TX,LPJ-52X,JFJ-17X,LPJ-J7X,LFJ-8EX,LT1-57X,LFJ-JGX,LFJ-SJS,LPJ-5GX,LPJ-YJX,LTS-5JX,ZFJ-S7X,LJJ-59X,LF1-5TX,LPJ-PJX,LF7-17X,QFJ-SJX,LFJ-SJZ,L8J-5EX,LFT-17X,LPJ-8JX,STJ-5JX,LF8-17X,TFJ-SJX,LFJ-1JT,LJJ-52X,LJJ-J7X,UFJ-SJX,LFJ-Y9X,LJJ-5GX,LFF-17X,LF1-5EX,LJJ-YJX,L8J-JJX,L9J-5TX,LTJ-STX,LFJ-P9X,JTJ-5JX,LJJ-PJX,LFJ-89X,LFJ-Y2X,ZFJ-1JX,L7J-5TX,LFJ-S7S,LJJ-8JX,LPJ-Y7X,LTS-57X,LF1-JJX,LFJ-P2X,LFJ-YGX,LP1-5JX,LT7-5JX,L9J-5EX,LPJ-P7X,QFJ-S7X,LTT-5JX,LFJ-S7Z,LTJ-SEX,LFJ-82X,LFJ-PGX,LFS-5TX,L8J-59X,LPJ-87X,STJ-57X,LT8-5JX,LFJ-8GX,L7J-5EX,TFJ-S7X,LFJ-17T,LFJ-SJH,UFJ-S7X,SFJ-5TX,LTF-5JX,L9J-JJX,L8J-52X,LJJ-Y7X,L8J-J7X,LF1-59X,LFS-5EX,LJ1-5JX,JTJ-57X,L8J-5GX,LFJ-1JS,LJJ-P7X,L8J-YJX,L7J-JJX,LFJ-SJU,ZFJ-17X,LFJ-SJC,LJJ-87X,L8J-PJX,JFJ-5TX,LF1-52X,QFJ-1JX,LF1-J7X,SFJ-5EX,LFJ-1JZ,LP1-57X,LT7-57X,L8J-8JX,LFS-JJX,LF1-5GX,LTT-57X,LPS-5JX,L9J-59X,LF1-YJX,LTJ-S9X,TFJ-1JX,LF7-5TX,LT8-57X,LTJ-5JT,LF1-PJX,UFJ-1JX,LFT-5TX,LFJ-S7H,L7J-59X,JFJ-5EX,SFJ-JJX,SPJ-5JX,L9J-52X,LF1-8JX,LTF-57X,LTJ-1TX,L9J-J7X,LTJ-S2X,LF8-5TX,L9J-5GX,LJ1-57X,L9J-YJX,LTJ-SGX,LFJ-17S,L7J-52X,LFS-59X,LFF-5TX,L8J-Y7X,LF7-5EX,L7J-J7X,LFJ-S7U,LJS-5JX,ZTJ-5JX,LFT-5EX,LPJ-STX,JFJ-JJX,L9J-PJX,LFJ-S7C,L81-5JX,JPJ-5JX,L7J-5GX,L8J-P7X,L7J-YJX,QFJ-17X,LFJ-17Z,LTJ-1EX,L9J-8JX,LF8-5EX,SFJ-59X,LFS-52X,L8J-87X,LFS-J7X,L7J-PJX,SJJ-5JX,LPS-57X,LF1-Y7X,TFJ-17X,LF7-JJX,LFF-5EX,LFS-5GX,LP7-5JX,LFJ-1JH,L7J-8JX,LFT-JJX,LFS-YJX,LPT-5JX,LPJ-SEX,LTJ-57T,LF1-P7X,UFJ-17X,SFJ-52X,SFJ-J7X,LFS-PJX,LF8-JJX,SPJ-57X,JFJ-59X,LP8-5JX,LF1-87X,LJJ-STX,LFJ-5TT,JJJ-5JX,SFJ-5GX,LFS-8JX,SFJ-YJX,LFJ-1JU,LFF-JJX,LTJ-5JS,LPF-5JX,L9J-Y7X,LFJ-1JC,SFJ-PJX,L91-5JX,JFJ-52X,LJS-57X,ZTJ-57X,LF7-59X,LT1-SJX,JFJ-J7X,L9J-P7X,L81-57X,JPJ-57X,LFT-59X,LJ7-5JX,SFJ-8JX,QTJ-5JX,L7J-Y7X,LTJ-5JZ,LJT-5JX,JFJ-5GX,L8S-5JX,LJJ-SEX,L9J-87X,JFJ-YJX,LFJ-5ET,ZFJ-5TX,L71-5JX,LTJ-19X,LF8-59X,L7J-P7X,SJJ-57X,LJ8-5JX,LF7-52X,TTJ-5JX,JFJ-PJX,LF7-J7X,LFT-52X,LP7-57X,LFJ-17H,L7J-87X,LFT-J7X,LFS-Y7X,LFF-59X,LPT-57X,S8J-5JX,UTJ-5JX,LF7-5GX,JFJ-8JX,LJF-5JX,LPJ-S9X,LF7-YJX,LTJ-12X,LFT-5GX,LF8-52X,LFT-YJX,LFS-P7X,LF8-J7X,LFJ-JJT,LP8-57X,LPJ-5JT,ZFJ-5EX,JJJ-57X,LF7-PJX,LTJ-1GX,LF8-5GX,LFS-87X,SFJ-Y7X,LFT-PJX,LFF-52X,LF8-YJX,LFJ-17U,LFF-J7X,L8J-STX,LTJ-57S,LPF-57X,LPJ-1TX,LPJ-S2X,SF1-5JX,LF7-8JX,LFJ-17C,J8J-5JX,LFT-8JX,SFJ-P7X,LFF-5GX,L91-57X,LF8-PJX,LFF-YJX,LT1-S7X,LPJ-SGX,LFJ-5TS,L9S-5JX,LJ7-57X,SFJ-87X,QTJ-57X,LF8-8JX,LTJ-57Z,ZFJ-JJX,LJT-57X,LTS-SJX,L8S-57X,ZPJ-5JX,LFF-PJX,JFJ-Y7X,LJJ-S9X,L71-57X,LF1-STX,L87-5JX,LFJ-59T,JF1-5JX,L8T-5JX,LFF-8JX,LJ8-57X,QFJ-5TX,L8J-SEX,LJJ-5JT,L7S-5JX,TTJ-57X,LPJ-1EX,LFJ-5TZ,JFJ-P7X,LTJ-5JH,S9J-5JX,STJ-SJX,S8J-57X,UTJ-57X,L88-5JX,JFJ-87X,LJF-57X,LJJ-1TX,LJJ-S2X,LF7-Y7X,LFJ-5ES,TFJ-5TX,LFJ-52T,LFT-Y7X,LFJ-J7T,LPJ-57T,S7J-5JX,UFJ-5TX,L8F-5JX,LJJ-SGX,LF7-P7X,LF1-SEX,ZFJ-59X,LFJ-5GT,L9J-STX,LFT-P7X,LF8-Y7X,LTJ-5JU,LFJ-YJT,QFJ-5EX,J9J-5JX,ZJJ-5JX,LFJ-						5EZ,LTJ-5JC,SF1-57X,LF7-87X,LT1-1JX,JTJ-SJX,J8J-57X,LFT-87X,LF8-P7X,LFJ-PJT,SFS-5JX,LFF-Y7X,LFJ-JJS,LJJ-1EX,LPJ-5JS,L7J-STX,TFJ-5EX,ZFJ-52X,L9S-57X,J7J-5JX,LF8-87X,LFJ-8JT,ZFJ-J7X,LTS-S7X,ZPJ-57X,LFF-P7X,UFJ-5EX,L97-5JX,LP1-SJX,L9T-5JX,LT7-SJX,QFJ-JJX,L87-57X,ZFJ-5GX,L9J-SEX,QPJ-5JX,LFJ-JJZ,JF1-57X,LTT-SJX,ZFJ-YJX,LPJ-5JZ,L8T-57X,LFF-87X,LJJ-57T,L7S-57X,LFS-STX,LTJ-57H,L8J-S9X,S9J-57X,LPJ-19X,JFS-5JX,L98-5JX,L77-5JX,STJ-S7X,ZFJ-PJX,LT8-SJX,TFJ-JJX,L88-57X,L7T-5JX,L8J-5JT,TPJ-5JX,L7J-SEX,LFJ-5TH,UFJ-JJX,ZFJ-8JX,LFJ-59S,L9F-5JX,UPJ-5JX,S7J-57X,L78-5JX,SFJ-STX,LTF-SJX,LJJ-5JS,L8F-57X,L8J-1TX,L8J-S2X,LPJ-12X,LF1-S9X,LTJ-57U,LTJ-JTX,LFJ-Y7T,J9J-57X,ZJJ-57X,LFS-SEX,LTJ-57C,LJ1-SJX,QFJ-59X,LT1-17X,JTJ-S7X,L7F-5JX,L8J-SGX,LFJ-59Z,LF1-5JT,LPJ-1GX,QJJ-5JX,LFJ-52S,LFJ-P7T,LJJ-5JZ,SFS-57X,LFJ-J7S,LTS-1JX,Z8J-5JX,LFJ-5TU,LPJ-57S,LJJ-19X,J7J-57X,LFJ-5TC,LFJ-5EH,SF7-5JX,LF1-1TX,JFJ-STX,TFJ-59X,LF1-S2X,LFJ-87T,LFJ-5GS,SFT-5JX,LFJ-YJS,SFJ-SEX,L97-57X,TJJ-5JX,L8J-1EX,LP1-S7X,QFJ-52X,LFJ-52Z,L9T-57X,UFJ-59X,LT7-S7X,QFJ-J7X,QPJ-57X,LFJ-J7Z,LTJ-JEX,LF1-SGX,LTT-S7X,ZFJ-Y7X,LPJ-57Z,LPS-SJX,UJJ-5JX,L9J-S9X,STJ-1JX,SF8-5JX,LFJ-PJS,QFJ-5GX,ZF1-5JX,LFJ-5GZ,LJJ-12X,JFS-57X,QFJ-YJX,L98-57X,L9J-5JT,TFJ-52X,L77-57X,LFJ-YJZ,LF7-STX,ZFJ-P7X,LT8-S7X,LFJ-8JS,TFJ-J7X,LTJ-SJT,L7T-57X,LFJ-5EU,L8J-57T,TPJ-57X,JF7-5JX,LFJ-JJH,LFT-STX,SFF-5JX,LPJ-5JH,LFJ-5EC,UFJ-52X,JFT-5JX,L7J-S9X,LJJ-1GX,QFJ-PJX,LF1-1EX,JFJ-SEX,TFJ-5GX,LFJ-PJZ,UFJ-J7X,ZFJ-87X,L9F-57X,SPJ-SJX,L9J-1TX,UPJ-57X,L9J-S2X,TFJ-YJX,L78-57X,LTF-S7X,L7J-5JT,LJJ-57S,LF8-STX,QFJ-8JX,UFJ-5GX,JTJ-1JX,JF8-5JX,LFJ-8JZ,UFJ-YJX,L9J-SGX,TFJ-PJX,LJ1-S7X,L8J-5JS,L7F-57X,L7J-1TX,L7J-S2X,LF1-57T,LFS-S9X,LFF-STX,Z9J-5JX,LFJ-JJU,QJJ-57X,LF7-SEX,UFJ-PJX,JFF-5JX,LPJ-5JU,LTJ-YTX,LJJ-57Z,TFJ-8JX,LJS-SJX,ZTJ-SJX,LTS-17X,Z8J-57X,LFJ-JJC,LFT-SEX,LFS-5JT,LPJ-5JC,L81-SJX,LP1-1JX,JPJ-SJX,L7J-SGX,SF7-57X,LT7-1JX,UFJ-8JX,Q8J-5JX,L9J-1EX,LTJ-PTX,LFJ-59H,SFT-57X,L8J-5JZ,LTT-1JX,LFJ-Y7S,Z7J-5JX,TJJ-57X,LF8-SEX,LJJ-5JH,LFS-1TX,SFJ-S9X,LFS-S2X,L8J-19X,LF1-5JS,LTJ-8TX,SJJ-SJX,LPS-S7X,UJJ-57X,STJ-17X,SF8-57X,LFJ-P7S,LTJ-J9X,SFJ-5JT,LT8-1JX,T8J-5JX,L7J-1EX,LFF-SEX,ZF1-57X,LFS-SGX,QFJ-Y7X,LP7-SJX,L9J-57T,LFJ-Y7Z,LTJ-YEX,LFJ-52H,LPT-SJX,LFJ-87S,U8J-5JX,LTJ-S7T,JF7-57X,QF1-5JX,ZFS-5JX,LFJ-J7H,SFF-57X,LPJ-57H,SFJ-1TX,LTF-1JX,LF1-5JZ,SFJ-S2X,LFJ-59U,JFT-57X,L8J-12X,QFJ-P7X,LFJ-P7Z,LTJ-PEX,LFJ-59C,SPJ-S7X,LJJ-5JU,LFJ-5GH,LF1-19X,JFJ-S9X,LP8-SJX,TFJ-Y7X,LTJ-J2X,LFJ-YJH,L7J-57T,LJJ-5JC,LFS-1EX,LFJ-STT,LJ1-1JX,JJJ-SJX,SFJ-SGX,QFJ-87X,JTJ-17X,L8J-1GX,JF8-57X,TF1-5JX,JFJ-5JT,LFJ-87Z,LTJ-8EX,UFJ-Y7X,L9J-5JS,TFJ-P7X,LTJ-JGX,LTJ-SJS,LFJ-PJH,LPF-SJX,L8J-57S,LFJ-52U,UF1-5JX,Z9J-57X,LFJ-J7U,LFJ-52C,UFJ-P7X,JFF-57X,LPJ-57U,L91-SJX,JFJ-1TX,LPJ-JTX,LF1-12X,JFJ-S2X,TFJ-87X,LJS-S7X,ZTJ-S7X,LFJ-J7C,LFJ-8JH,LF7-S9X,LFS-57T,LPJ-57C,SFJ-1EX,L81-S7X,Q9J-5JX,LP1-17X,JPJ-S7X,L7J-5JS,LFJ-5GU,LFT-S9X,LT1-5TX,L9J-5JZ,LJ7-SJX,LT7-17X,QTJ-SJX,UFJ-87X,LFJ-YJU,Q8J-57X,LF7-5JT,LFJ-5GC,LTJ-SJZ,LJT-SJX,L8J-57Z,LF1-1GX,JFJ-SGX,L8S-SJX,LTT-17X,LPS-1JX,LFJ-YJC,L9J-19X,LFT-5JT,Z7J-57X,LFJ-SET,ZFJ-STX,LJJ-57H,L71-SJX,LF8-S9X,LF1-57S,LFJ-PJU,T9J-5JX,Q7J-5JX,SJJ-S7X,LJ8-SJX,LF7-1TX,L7J-5JZ,LF7-S2X,LFJ-PJC,SFJ-57T,LT8-17X,TTJ-SJX,LTJ-1JT,T8J-57X,LF8-5JT,LFT-1TX,LFS-5JS,L8J-5JH,LFT-S2X,LP7-S7X,U9J-5JX,LFJ-8JU,L7J-19X,JFJ-1EX,LPJ-JEX,LFF-S9X,LPT-S7X,S8J-SJX,UTJ-SJX,U8J-57X,LFJ-8JC,SPJ-1JX,L9J-12X,LTJ-Y9X,LF7-SGX,QF1-57X,ZFS-57X,LJF-SJX,T7J-5JX,LTF-17X,LF1-57Z,LT1-5EX,LFT-SGX,LF8-1TX,LFF-5JT,LF8-S2X,ZF7-5JX,QFS-5JX,LJJ-57U,LJJ-JTX,LP8-S7X,LPJ-SJT,LFS-5JZ,U7J-5JX,ZFT-5JX,LTJ-P9X,L9J-1GX,LFJ-Y7H,ZFJ-SEX,LJJ-57C,SFJ-5JS,LJ1-17X,JJJ-S7X,LF8-SGX,TF1-57X,L7J-12X,JFJ-57T,LFS-19X,LFF-1TX,LFF-S2X,LF1-5JH,L9J-57S,L8J-5JU,LF7-1EX,LTJ-89X,LTJ-Y2X,LJS-1JX,ZTJ-1JX,LTJ-S7S,LFJ-P7H,LPF-S7X,ZF8-5JX,LFT-1EX,L8J-5JC,SF1-SJX,TFS-5JX,UF1-57X,L81-1JX,J8J-SJX,JPJ-1JX,L7J-1GX,LFF-SGX,L91-S7X,SFJ-5JZ,LT1-JJX,LTJ-P2X,UFS-5JX,LFJ-87H,LTJ-YGX,Q9J-57X,LF8-1EX,L7J-57S,ZFF-5JX,L9J-57Z,LFJ-STS,L9S-SJX,SFJ-19X,LJ7-S7X,LFS-12X,QTJ-S7X,LFJ-Y7U";
            alert(str);
        }

        function update(movePoint)
            {
                var ctx = context;
                var i, len, p, dx, dy;
                //******add*****//
                var ctx_store = context_store;
                //**************//
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                //ctx.drawImage(img, 100, 100, 100, 100, srcBounds.x, srcBounds.y, srcBounds.width, srcBounds.height);
                if (wheelEvent == "add")
                {
                    if (rbPoint.x - ltPoint.x > 2 * scaleValue * srcBounds.width)
                    {
                        ltPoint.x += scaleValue * srcBounds.width;
                        rbPoint.x -= scaleValue * srcBounds.width;
                    }
                    if (rbPoint.y - ltPoint.y > 2 * scaleValue * srcBounds.height)
                    {
                        ltPoint.y += scaleValue * srcBounds.height;
                        rbPoint.y -= scaleValue * srcBounds.height;
                    }
                    ctx.drawImage(img, ltPoint.x, ltPoint.y, (rbPoint.x - ltPoint.x), (rbPoint.y - ltPoint.y), srcBounds.x, srcBounds.y, srcBounds.width, srcBounds.height);
                    //ctx.drawImage(img, x, y, scaleX*(scaleRightBottomPoint.x-scaleLeftTopPoint.x), scaleY*(scaleRightBottomPoint.y-scaleLeftTopPoint.y), srcBounds.x, srcBounds.y, srcBounds.width, srcBounds.height);
                    srcImageData = ctx.getImageData(srcBounds.x, srcBounds.y, srcBounds.width, srcBounds.height);
                    isScale = true;
                    wheelEvent = "false";
                }
                else if (wheelEvent == "reduce")
                {
                    ltPoint.x -= scaleValue * srcBounds.width;
                    ltPoint.y -= scaleValue * srcBounds.height;
                    rbPoint.x += scaleValue * srcBounds.width;
                    rbPoint.y += scaleValue * srcBounds.height;
                    if (ltPoint.x < 0) ltPoint.x = 0;
                    if (ltPoint.y < 0) ltPoint.y = 0;
                    if (rbPoint.x > srcBounds.width) rbPoint.x = srcBounds.width;
                    if (rbPoint.y > srcBounds.height) rbPoint.y = srcBounds.height;
                    if (ltPoint.x == 0 && ltPoint.y == 0 && rbPoint.x == srcBounds.width && rbPoint.y == srcBounds.height) isScale = false;
                    ctx.drawImage(img, ltPoint.x, ltPoint.y, (rbPoint.x - ltPoint.x), (rbPoint.y - ltPoint.y), srcBounds.x, srcBounds.y, srcBounds.width, srcBounds.height);
                    //ctx.drawImage(img, x, y, scaleX*(rbPoint.x-ltPoint.x), scaleY*(rbPoint.y-ltPoint.y), srcBounds.x, srcBounds.y, srcBounds.width, srcBounds.height);
                    srcImageData = ctx.getImageData(srcBounds.x, srcBounds.y, srcBounds.width, srcBounds.height);
                    wheelEvent = "false";
                }
                else if ((scaleLeftTopPoint != null && scaleRightBottomPoint != null))
                {
                    var smallX, smallY, bigX, bigY;
                    if (scaleLeftTopPoint.x > scaleRightBottomPoint.x)
                    {
                        smallX = scaleRightBottomPoint.x;
                        bigX = scaleLeftTopPoint.x;
                    }
                    else
                    {
                        smallX = scaleLeftTopPoint.x;
                        bigX = scaleRightBottomPoint.x;
                    }
                    if (scaleLeftTopPoint.y > scaleRightBottomPoint.y)
                    {
                        smallY = scaleRightBottomPoint.y;
                        bigY = scaleLeftTopPoint.y;
                    }
                    else
                    {
                        smallY = scaleLeftTopPoint.y;
                        bigY = scaleRightBottomPoint.y;
                    }
                    var lengthX = rbPoint.x - ltPoint.x;
                    var lengthY = rbPoint.y - ltPoint.y;
                    ltPoint.x += lengthX * smallX / srcBounds.width;
                    ltPoint.y += lengthY * smallY / srcBounds.height;
                    rbPoint.x = ltPoint.x + lengthX * (bigX - smallX) / srcBounds.width;
                    rbPoint.y = ltPoint.y + lengthY * (bigY - smallY) / srcBounds.height;
                    ctx.drawImage(img, ltPoint.x, ltPoint.y, (rbPoint.x - ltPoint.x), (rbPoint.y - ltPoint.y), srcBounds.x, srcBounds.y, srcBounds.width, srcBounds.height);
                    //ctx.drawImage(img, scaleX*scaleLeftTopPoint.x+scaleBasePoint.x, scaleY*scaleLeftTopPoint.y+scaleBasePoint.y, scaleX*Math.abs(scaleRightBottomPoint.x-scaleLeftTopPoint.x), scaleY*Math.abs(scaleRightBottomPoint.y-scaleLeftTopPoint.y), srcBounds.x, srcBounds.y, srcBounds.width, srcBounds.height);			
                    srcImageData = ctx.getImageData(srcBounds.x, srcBounds.y, srcBounds.width, srcBounds.height);
                    isScale = true;
                }
                else
                {
                    // 入力?像
                    ctx.putImageData(srcImageData, srcBounds.x, srcBounds.y);
                }
                // 出力?像
                var dst = homographyTransform(srcImageData, DST_WIDTH, DST_HEIGHT, points[0], points[1], points[2], points[3]);
                //alert((dstPoints[0].x+dstBounds.x)+","+ (dstPoints[0].y+dstBounds.y)+","+ (dstPoints[1].x-dstPoints[0].x)+","+ (dstPoints[2].y-dstPoints[0].y));
                ctx.putImageData(dst, dstBounds.x, dstBounds.y);
                var finalDst = context.getImageData(dstPoints[0].x + dstBounds.x, dstPoints[0].y + dstBounds.y, (dstPoints[1].x - dstPoints[0].x), (dstPoints[2].y - dstPoints[0].y));
                //**************Mandy 2015/03/19 add ***************//
                finalDstImg = context_store;
                finalDstImg.putImageData(finalDst, 0, 0);
                finalDstImgWidth = dstPoints[1].x - dstPoints[0].x;
                finalDstImgHeight = dstPoints[2].y - dstPoints[0].y;
                ctx.putImageData(finalDst, finalDstBounds.x, finalDstBounds.y);
                //*********new canvas *********//
                ctx_store.putImageData(finalDst, 0, 0);
                // ????
                ctx.beginPath();
                for (i = 0, len = points.length; i < len; i++)
                {
                    p = points[i];
                    ctx.moveTo(p.x + srcBounds.x, p.y + srcBounds.y);
                    ctx.arc(p.x + srcBounds.x, p.y + srcBounds.y, 4, 0, Math.PI * 2, false);
                }
                for (i = 0, len = dstPoints.length; i < len; i++)
                {
                    p = dstPoints[i];
                    ctx.moveTo(p.x + dstBounds.x, p.y + dstBounds.y);
                    ctx.arc(p.x + dstBounds.x, p.y + dstBounds.y, 4, 0, Math.PI * 2, false);
                }
                ctx.fill();
                // ?????位置
                for (i = 0, len = points.length; i < len; i++)
                {
                    p = points[i];
                    ctx.fillText(i === 0 ? 'top, left' : i === 1 ? 'top, right' : i === 2 ? 'bottom, right' : 'bottom, left', p.x + srcBounds.x + 5, p.y + srcBounds.y + 5);
                }
                ctx.fill();
                // ???
                ctx.beginPath();
                for (i = 0, len = points.length; i < len; i++)
                {
                    p = points[i];
                    ctx[i === 0 ? 'moveTo' : 'lineTo'](p.x + srcBounds.x, p.y + srcBounds.y);
                }
                ctx.closePath();
                ctx.fillStyle = "rgba(255,255,0,0.1)";
                ctx.fill();
                ctx.fillStyle = 'yellow';
                ctx.stroke();
                ctx.beginPath();
                for (i = 0, len = dstPoints.length; i < len; i++)
                {
                    p = dstPoints[i];
                    ctx[i === 0 ? 'moveTo' : 'lineTo'](p.x + dstBounds.x, p.y + dstBounds.y);
                }
                ctx.closePath();
                //hcf - update()
                if (document.getElementById("lengthListBox").selectedIndex != 0)
                {
                    for (i = 1; i <= numLineOfFinalDst; i++)
                    {
                        ctx.moveTo(xAxisOfLine[i] + finalDstBounds.x, finalDstBounds.y);
                        ctx.lineTo(xAxisOfLine[i] + finalDstBounds.x, finalDstBounds.y + Math.abs(dstPoints[2].y - dstPoints[1].y));
                    }
                }
                //--
                //ctx.fill();
                //ctx.closePath();
                ctx.fillStyle = "rgba(255,255,0,0.1)";
                ctx.fill();
                ctx.fillStyle = 'yellow';
                ctx.stroke();
                if (scaleLeftTopPoint != null && movePoint != null)
                {
                    ctx.fillStyle = "rgba(255, 0, 0, 0.2)";
                    /****************Mandy add*******************************/
                    ctx.fillRect(scaleLeftTopPoint.x + 50, scaleLeftTopPoint.y + 200, movePoint.x - scaleLeftTopPoint.x, movePoint.y - scaleLeftTopPoint.y);
                    /****************Mandy end*******************************/
                    ctx.fillStyle = 'yellow';
                }
            }
            //press to store
        function copy(filePath)
            {
                //alert("uploadLPImage");
                canvas_store.width = dstPoints[1].x - dstPoints[0].x;
                canvas_store.height = dstPoints[2].y - dstPoints[0].y;
                scaleLeftTopPoint = null,
                    scaleRightBottomPoint = null,
                    wheelEvent = "false"
                update();
                //alert(canvas_store.width+","+canvas_store.height);
                var dataURL = canvas_store.toDataURL();
                $.ajax(
                {
                    type: "POST",
                    url: "saveCanvas.php",
                    data:
                    {
                        imgBase64: dataURL,
                        filePath: filePath
                    }
                }).done(function (o)
                {
                    //alert(o);  	
                });
            }
            /**
             * homographyTransform
             *
             * @param {ImageData} src
             * @param {Number} dstWidth
             * @param {Number} dstHeight
             * @param {Point} p0
             * @param {Point} p1
             * @param {Point} p2
             * @param {Point} p3
             * @return ImageData
             */
        function homographyTransform(src, dstWidth, dstHeight, p0, p1, p2, p3)
        {
            var sx, sy, dx1, dy1, dx2, dy2,
                z, g, h,
                m0, m1, m2, m3, m4, m5, m6, m7,
                srcWidth, srcHeight, srcPixels,
                dst, dstPixels,
                x, y, yi, u, v, t, dx, dy, i, j;
            sx = p0.x - p1.x + p2.x - p3.x;
            sy = p0.y - p1.y + p2.y - p3.y;
            dx1 = p1.x - p2.x;
            dy1 = p1.y - p2.y;
            dx2 = p3.x - p2.x;
            dy2 = p3.y - p2.y;
            z = dx1 * dy2 - dy1 * dx2;
            g = (sx * dy2 - sy * dx2) / z;
            h = (sy * dx1 - sx * dy1) / z;
            m0 = p1.x - p0.x + g * p1.x;
            m1 = p3.x - p0.x + h * p3.x;
            m2 = p0.x;
            m3 = p1.y - p0.y + g * p1.y;
            m4 = p3.y - p0.y + h * p3.y;
            m5 = p0.y;
            m6 = g;
            m7 = h;
            srcWidth = src.width;
            srcHeight = src.height;
            srcPixels = src.data;
            dst = context.createImageData(dstWidth, dstHeight);
            dstPixels = dst.data;
            for (y = 0; y < dstHeight; y++)
            {
                yi = y * dstWidth;
                for (x = 0; x < dstWidth; x++)
                {
                    i = (yi + x) << 2;
                    u = x / dstWidth;
                    v = y / dstHeight;
                    t = m6 * u + m7 * v + 1;
                    dx = (m0 * u + m1 * v + m2) / t;
                    dy = (m3 * u + m4 * v + m5) / t;
                    if (dx >= 0 && dx < srcWidth && dy >= 0 && dy < srcHeight)
                    {
                        j = ((dy | 0) * srcWidth + (dx | 0)) << 2;
                        dstPixels[i] = srcPixels[j];
                        dstPixels[i + 1] = srcPixels[j + 1];
                        dstPixels[i + 2] = srcPixels[j + 2];
                    }
                    dstPixels[i + 3] = 255;
                }
            }
            return dst;
        }

        function getParameter(name)
        {
            if (name = (new RegExp('[?&]' + encodeURIComponent(name) + '=([^&]*)')).exec(location.search)) return decodeURIComponent(name[1]);
        }

        function initial()
        {
            draggingPoint = null;
            draggingDstPoint = null;
            selectedDraggingDstPoint = null;
            scaleLeftTopPoint = null;
            scaleRightBottomPoint = null;
            //scaleX=1;
            //scaleY=1;
            wheelEvent = "false";
            wheelCnt = 0;
            ltPoint = new Point(0, 0);
            rbPoint = new Point(srcBounds.width, srcBounds.height);
            isScale = false;
            scaleValue = 0.02;
            //scaleBasePoint = new Point(0,0);
            var bounds = new Rect(0, 0, SRC_WIDTH, SRC_HEIGHT).inflate(-60, -60);
            var dstBountsPoint = new Rect(0, 0, DST_WIDTH, DST_HEIGHT).inflate(-60, -60);
            points = [
                bounds.topLeft(),
                bounds.topRight(),
                bounds.bottomRight(),
                bounds.bottomLeft()
            ];
            dstPoints = [
                dstBountsPoint.topLeft(),
                dstBountsPoint.topRight(),
                dstBountsPoint.bottomRight(),
                dstBountsPoint.bottomLeft()
            ];
            context.drawImage(img, srcBounds.x, srcBounds.y, srcBounds.width, srcBounds.height);
            srcImageData = context.getImageData(srcBounds.x, srcBounds.y, srcBounds.width, srcBounds.height);
            draggingFinalDstPoint = -1;
            var xLen = Math.abs(dstPoints[1].x - dstPoints[0].x);
            var yLen = Math.abs(dstPoints[2].y - dstPoints[1].y);
            var temp = xLen / (numLineOfFinalDst + 1);
            for (i = 1; i <= numLineOfFinalDst + 1; i++)
            {
                xAxisOfLine[i] = temp * i;
            }
            update();
        }

        function initialCharSelect()
            {
                draggingPoint = null;
                draggingDstPoint = null;
                selectedDraggingDstPoint = null;
                scaleLeftTopPoint = null;
                scaleRightBottomPoint = null;
                //scaleX=1;
                //scaleY=1;
                var xLen = Math.abs(dstPoints[1].x - dstPoints[0].x);
                var yLen = Math.abs(dstPoints[2].y - dstPoints[1].y);
                var temp = xLen / (numLineOfFinalDst + 1);
                for (i = 1; i <= numLineOfFinalDst + 1; i++)
                {
                    xAxisOfLine[i] = temp * i;
                }
                update();
            }
            /**
             * Point
             */
        function Point(x, y)
            {
                this.x = x || 0;
                this.y = y || 0;
            }
            /**
             * Rect
             */
        function Rect(x, y, width, height)
        {
            this.x = x || 0;
            this.y = y || 0;
            this.width = width || 0;
            this.height = height || 0;
        }
        Rect.prototype.right = function ()
        {
            return this.x + this.width;
        };
        Rect.prototype.bottom = function ()
        {
            return this.y + this.height;
        };
        Rect.prototype.topLeft = function ()
        {
            return new Point(this.x, this.y);
        };
        Rect.prototype.topRight = function ()
        {
            return new Point(this.x + this.width, this.y);
        };
        Rect.prototype.bottomLeft = function ()
        {
            return new Point(this.x, this.y + this.height);
        };
        Rect.prototype.bottomRight = function ()
        {
            return new Point(this.x + this.width, this.y + this.height);
        };
        Rect.prototype.inflate = function (dx, dy)
        {
            var rect = this.clone();
            rect.x -= dx * 0.5;
            rect.y -= dy * 0.5;
            rect.width += dx;
            rect.height += dy;
            return rect;
        };
        Rect.prototype.clone = function (dx, dy)
        {
            return new Rect(this.x, this.y, this.width, this.height);
        };
        /***************************add/delete License Plate Chars**********************************/
        var listBoxCnt = new Object();
        listBoxCnt["1Char"] = 0;
        listBoxCnt["2Char"] = 0;
        listBoxCnt["3Char"] = 0;
        listBoxCnt["4Char"] = 0;
        listBoxCnt["5Char"] = 0;
        listBoxCnt["6Char"] = 0;
        listBoxCnt["7Char"] = 0;

        function addListBoxValue(listBoxId)
        {
            //var v = document.getElementById("txtValue").value;
            if (listBoxCnt[listBoxId] >= 7)
            {
                alert("最多選擇7種可能的字元");
                return false;
            }
            var sourceListBox = document.getElementById("sourceListBox");
            var index = sourceListBox.selectedIndex;
            var v = sourceListBox.options[index].value;
            for (var i = 0; i < listBoxCnt[listBoxId]; i++)
            {
                if (document.getElementById(listBoxId).options[i].value == v)
                {
                    alert("選擇重覆的字元，請重新選擇");
                    return false;
                }
            }
            var AddOpt = new Option(v, v);
            document.getElementById(listBoxId).options[listBoxCnt[listBoxId]++] = AddOpt;
            return true;
        }

        function deleteListBoxValue(listBoxId)
        {
            var s = 1;
            var index;
            if (document.getElementById(listBoxId).selectedIndex == -1)
            {
                alert("請選擇欲刪除的字元");
                return true;
            }
            while (s > 0)
            {
                index = document.getElementById(listBoxId).selectedIndex;
                if (index >= 0)
                {
                    document.getElementById(listBoxId).options[index] = null;
                    --listBoxCnt[listBoxId];
                }
                else
                {
                    s = 0;
                }
            }
            return true;
        }

        function deleteAllListBoxValue(listBoxId)
        {
            while (listBoxCnt[listBoxId] >= 0)
            {
                document.getElementById(listBoxId).options[listBoxCnt[listBoxId]] = null;
                --listBoxCnt[listBoxId];
            }
            listBoxCnt[listBoxId] = 0;
            return true;
        }

        function hideAllCharListBox()
        {
            document.getElementById("sourceListBox").style.display = 'none';
            for (var i = 1; i <= 7; i++)
            {
                document.getElementById(i + "CharAddButton").style.display = 'none';
                document.getElementById(i + "Char").style.display = 'none';
                document.getElementById(i + "CharDelButton").style.display = 'none';
            }
        }

        function showCharListBox(max)
            {
                document.getElementById("sourceListBox").style.display = 'inline';
                for (var i = 1; i <= max; i++)
                {
                    document.getElementById(i + "CharAddButton").style.display = 'inline';
                    document.getElementById(i + "Char").style.display = 'inline';
                    document.getElementById(i + "CharDelButton").style.display = 'inline';
                }
            }
            //--
        function lengthListBoxOnChange(index)
        {
            hideAllCharListBox();
            switch (index)
            {
            case "0":
                break;
            case "1": //6碼=>2-4
                showCharListBox(6);
                numLineOfFinalDst = 5;
                beforeDashCharCnt = 2;
                break;
            case "2": //6碼=>4-2
                showCharListBox(6);
                numLineOfFinalDst = 5;
                beforeDashCharCnt = 4;
                break;
            case "3": //6碼=>3-3
                showCharListBox(6);
                numLineOfFinalDst = 5;
                beforeDashCharCnt = 3;
                break;
            case "4": //7碼=>3-4
                showCharListBox(7);
                numLineOfFinalDst = 6;
                beforeDashCharCnt = 3;
                break;
            case "5": //5碼=>2-3
                showCharListBox(5);
                numLineOfFinalDst = 4;
                beforeDashCharCnt = 2;
                break;
            case "6": //5碼=>3-2
                showCharListBox(5);
                numLineOfFinalDst = 4;
                beforeDashCharCnt = 3;
                break;
            case "7": //4碼=>2-2
                showCharListBox(4);
                numLineOfFinalDst = 3;
                beforeDashCharCnt = 2;
            }
            initialCharSelect();
        }

        function getListBoxIndex(id)
        {
            return document.getElementById(id).selectedIndex;
        }

        function getCheckBoxChecked(id)
        {
            if (document.getElementById(id).checked) return "1";
            else return "0";
        }

        function getBeforeDashCharCnt()
            {
                return beforeDashCharCnt;
            }
            /****************Mandy add 2015/03/24 卷軸視窗固定座標***********/
        function handleEvent(e, type)
            {
                var evt = e ? e : window.event;
                var clickX = 0,
                    clickY = 0;
                if ((evt.clientX || evt.clientY) && document.body && document.body.scrollLeft != null)
                {
                    clickX = evt.clientX + document.body.scrollLeft;
                    clickY = evt.clientY + document.body.scrollTop;
                }
                if ((evt.clientX || evt.clientY) && document.compatMode == 'CSS1Compat' && document.documentElement && document.documentElement.scrollLeft != null)
                {
                    clickX = evt.clientX + document.documentElement.scrollLeft;
                    clickY = evt.clientY + document.documentElement.scrollTop;
                }
                if (evt.pageX || evt.pageY)
                {
                    clickX = evt.pageX;
                    clickY = evt.pageY;
                }
                if (type == "X")
                {
                    return clickX;
                }
                else if (type == "Y")
                {
                    return clickY;
                }
                alert(evt.type.toUpperCase() + ' mouse event:' + '\n pageX = ' + clickX + '\n pageY = ' + clickY + '\n clientX = ' + evt.clientX + '\n clientY = ' + evt.clientY + '\n screenX = ' + evt.screenX + '\n screenY = ' + evt.screenY)
            }
            /****************Mandy add 2015/03/19 二值化********************/
        var blackPercent = 0;

        function imageLoaded()
            {
                var black = 0;
                var white = 0;
                // Read the width and height of the canvas
                width = finalDstImgWidth;
                height = finalDstImgHeight;
                // Get all canvas pixel data
                imageData = finalDstImg.getImageData(0, 0, width, height);
                // Run through the image. 
                // The height of the image.
                for (y = 0; y < height; y++)
                {
                    // *4 for 4 ints per pixel.
                    // This is an input index.
                    inpos = y * width * 4;
                    // This is an output index.
                    // The width of the image.
                    for (x = 0; x < width; x++)
                    {
                        // Get the pixel of the red channel.
                        r = imageData.data[inpos++]
                            // Get the pixel of the green channel.
                        g = imageData.data[inpos++]
                            // Get the pixel of the blue channel.
                        b = imageData.data[inpos++]
                            // Get the pixel of the alpha channel.
                        a = imageData.data[inpos++]
                            // Transform RGB color space to gray scale.
                        gray = (0.299 * r + 0.587 * g + 0.114 * b)
                            // This is our threshold. You can change it.
                        if (gray > 120)
                        {
                            // Set the pixel is white.
                            white = white + 1;
                        }
                        else
                        {
                            // Set the pixel is black.
                            black = black + 1;
                        }
                    } // The closing "The width of the image".
                } // The closing "The height of the image".
                // Put pixel data on canvas.
                blackPercent = black / (white + black) * 100;
                //alert(finalDstImgHeight);
                //alert(finalDstImgWidth);
                //alert(black);
                //alert(white);
                //alert((black/(white+black)*100)+'%');
            }
            /****************Mandy add*******************************/
        var page = 1;
        var str = "";

        function next()
        {
            /****fred add*********/
            if (page == 2 && getListBoxIndex("lengthListBox") == 0)
            {
                alert("請選擇車牌長度");
                return;
            }
            if (page == 2 && getListBoxIndex("classListBox") == 0)
            {
                alert("請選擇牌類");
                return;
            }
            if (page == 2)
            {
                imageLoaded();
                if (blackPercent <= 10 || blackPercent >= 80)
                {
					
                    alert("無數值可辨識,選擇的車牌位置不正確或是影像解析度太低");
                    return;
                }
            }
            /*********************/
            if (page < 5) page++;
            /*****fred add*******/
            //for develop mode
            if (page == 4) predictLPNumber(); //parent.predictLPNumber();
            if (page == 5) analysisLPNumber(); //parent.analysisLPNumber();
            /********************/
            show();
        }

        function backpage()
        {
            if (page > 0) page--;
            show();
        }

        function show()
            {
                var str = "";
                if (page < 2)
                {
                    document.getElementById("btn-black").innerHTML = "重新設定";
                }
                else
                {
                    document.getElementById("btn-black").innerHTML = "上一步";
                }
                switch (page)
                {
                case 0:
                    initial();
                    page = 1;
                    break;
                case 1:
                    str = "從車牌影像中，選取辨識目標，<br>執行車牌校正功能。<br><br>目標擷取完整有利於車牌辨識的結果。<br><br>1.還原原始預設，請按重新選取<br>2.目標擷取後請按確認鍵";
                    txt.innerHTML = str;
                    document.getElementById("Progres").style.background = "url('images1/Progres1.png')";
                    document.getElementById("title").style.background = "url('images1/title1.png')";
                    var div = document.getElementById("content4");
                    div.style.top = '50px';
                    div.style.height = '280px';
                    document.getElementById("explain").style.height = '250px';
                    document.getElementById("content2").style.display = 'none';
                    document.getElementById("content2-1").style.display = 'none';
                    break;
                case 2:
                    str = "1.請參考範例圖示延車牌字體邊沿框選<br>2.選擇車牌號碼類型。";
                    txt.innerHTML = str;
                    document.getElementById("content2").style.display = '';
                    document.getElementById("content2-1").style.display = '';
                    var div = document.getElementById("content4");
                    div.style.top = '0px';
                    div.style.height = '150px';
                    document.getElementById("explain").style.height = '120px';
                    document.getElementById("Progres").style.background = "url('images1/Progres2.png')";
                    document.getElementById("title").style.background = "url('images1/title2.png')";
                    document.getElementById('content3').style.display = 'none';
                    document.getElementById('content3-1').style.visibility = '';
                    break;
                case 3:
                    //imageLoaded();
                    //if(blackPercent > 10  && blackPercent < 80)
                    //{
                    str = "在<b>分割影像</b>中的辨識字體，<br>調整邊緣分割線。";
                    txt.innerHTML = str;
                    document.getElementById('content3').style.display = '';
                    document.getElementById('content3-1').style.visibility = 'hidden';
                    document.getElementById("content5").style.display = 'none';
                    document.getElementById("content6").style.display = 'none';
                    //}
                    //else
                    //{
                    //    page = 2;
                    //  alert("無數值可辨識");
                    //}
                    break;
                case 4:
                    str = "1.挑選適合的字元號碼<br>2.選擇車輛類型，確認後預測車牌組合";
                    txt.innerHTML = str;
                    document.getElementById("content5").style.display = '';
                    document.getElementById("content6").style.display = '';
                    document.getElementById("Progres").style.background = "url('images1/Progres3.png')";
                    document.getElementById("title").style.background = "url('images1/title3.png')";
                    document.getElementById("btn-next").style.visibility = '';
                    break;
                case 5:
                    str = "點選系統分析後車號，<br>將呈現車號完整資訊。";
                    txt.innerHTML = str;
                    document.getElementById("content5").style.display = '';
                    document.getElementById("content6").style.display = '';
                    document.getElementById("Progres").style.background = "url('images1/Progres4.png')";
                    document.getElementById("title").style.background = "url('images1/title4.png')";
                    document.getElementById("btn-next").style.visibility = 'hidden';
                    break;
                }
            }
            /****************Mandy end***************************/
            //----------特殊規則勾選及下拉式選單隱藏----------------//
        var Checkbox = document.getElementById('specialRuleCheckBox');
        Checkbox.onchange = function ()
        {
            if (this.checked)
            {
                $("#specialRuleSelect").show();
                document.getElementById("lengthListBox").disabled = true;
                document.getElementById("whiteWordCheckBox").disabled = true;
            }
            else
            {
                $("#specialRuleSelect").hide();
                document.getElementById("lengthListBox").disabled = false;
                document.getElementById("whiteWordCheckBox").disabled = false;
                document.getElementById("whiteWordCheckBox").checked = false;
                document.getElementById('lengthListBox').getElementsByTagName('option')[0].selected = 'selected';
            }
        };
        $('#specialRuleSelect').ddslick(
        {
            data: specialData,
            width: 230,
            //height: 30,
            imagePosition: "left",
            selectText: "請選擇",
            truncateDescription: true,
            onSelected: function (data)
            {
                //alert(data.selectedData.text);
                //alert(data.selectedData.value);
                //alert(data.selectedData.description);
                //alert(data.selectedData.imageSrc);
                switch (data.selectedData.value)
                {
                case 1:
                    document.getElementById('lengthListBox').getElementsByTagName('option')[4].selected = 'selected';
					lengthListBoxOnChange("4");
                    alert('選取: ' + data.selectedData.text);
                    break;
                case 2:
                    document.getElementById('lengthListBox').getElementsByTagName('option')[4].selected = 'selected';
					lengthListBoxOnChange("4");
                    alert('選取: ' + data.selectedData.text);
                    break;
                case 3:
                    document.getElementById('lengthListBox').getElementsByTagName('option')[4].selected = 'selected';
					lengthListBoxOnChange("4");
                    alert('選取: ' + data.selectedData.text);
                    break;
                case 4:
                    document.getElementById('lengthListBox').getElementsByTagName('option')[4].selected = 'selected';
					lengthListBoxOnChange("4");
                    alert('選取: ' + data.selectedData.text);
                    break;
                case 5:
                    document.getElementById('lengthListBox').getElementsByTagName('option')[4].selected = 'selected';
					lengthListBoxOnChange("4");
                    alert('選取: ' + data.selectedData.text);
                    break;
                case 6:
                    document.getElementById('lengthListBox').getElementsByTagName('option')[3].selected = 'selected';
					lengthListBoxOnChange("3");
                    alert('選取: ' + data.selectedData.text);
                    break;
                case 7:
                    document.getElementById('lengthListBox').getElementsByTagName('option')[3].selected = 'selected';
					lengthListBoxOnChange("3");
					document.getElementById("whiteWordCheckBox").checked = true;
                    alert('選取: ' + data.selectedData.text);
                    break;
                }
            }
        });
        $("#specialRuleSelect").hide();

        </script>
    </body>

</html>
